<template>
  <div id="app" class="xd-learn" v-cloak>
    <el-container>
      <el-header height="150px">
        <div class="xt-main-container el-header-bg">
          <img class="logo" :src="$route.path.indexOf('Cinziqao')>-1?logoCinziqaoUrl:logoUrl" @click="goHome" />
          <div class="login_panel">
            <div class="xueyuan" @click.stop="showLogin" v-if="!userInfo.name">
              <img src="@/assets/imgs/xueyuan_login.png" />
              <span>用户登录</span>
            </div> <div class="xueyuan" @click.stop="showRegister" v-if="!userInfo.name">
              <img src="@/assets/imgs/xueyuan_login.png" />
              <span>用户注册</span>
            </div>
            <div
              v-else
              style="color:white;font-size:14px;display:flex;align-items:center;"
              class="login-info"
            >
              <el-dropdown>
                <span class="el-dropdown-link">
                  欢迎您：{{userInfo.name}}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
<!--                  <el-dropdown-item
                    @click.native="isLoclaShowUpdateUserName=true,userName=userInfo.name"
                  >修改昵称</el-dropdown-item>-->
                  <el-dropdown-item  @click.native="isLoclaShowUpdatePassword=true">修改密码</el-dropdown-item>
                  <el-dropdown-item @click.native="exit">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
      </el-header>

      <el-main :style="{minHeight:elMainMinHeight+'px'}">
        <router-view />
      </el-main>

      <el-footer height="187px">
        <div class="footer-root">
          <!-- <p class="total">
            <span>今日访问人数：{{stat.todayCount}} 人&nbsp;</span>
            <span>昨日访问人数：{{stat.yesterdayCount}} 人&nbsp;</span>
            <span>总访问量：{{stat.allCount}} 人&nbsp;</span>
            <span>当前在线：{{stat.onlineCount}} 人&nbsp;</span>
          </p> -->
          <p>版权所有：干部教育中心 &nbsp;&nbsp;&nbsp;地址：人民路215号</p>
          <p>中国工信部备案号/经营许可号:[京ICP备05038127号-2]</p>
          <p style="display:flex;">
            <span class="bottom">
              Alternate Text京公网安备 33011002011480号
              <a
                href="http://25.20.199.49:8099/xxpt/profile/chrome76.exe"
                target="_blank"
                style="color:#fff; text-decoration: none;margin-left:10px;"
              >推荐使用chrome浏览器，点击下载安装</a>
            </span>
            <a class="admin" style="border: solid 1px #fff;" href="http://25.20.199.49:8099/xxpt/login" target="_blank">
              <img src="@/assets/imgs/admin_login.png" />
              <span style="color:#fff;">管理员登录</span>
            </a>
          </p>
        </div>
      </el-footer>
    </el-container>
    <register-dialog
        :visible.sync="registerVisible"
        @register-success="handleRegisterSuccess"
    />
    <el-dialog
      title="登录"
      :visible.sync="isLoclaShowLogin"
      width="450px"
      :close-on-click-modal="false"
      center
      class="login-panel"
    >
      <el-form :model="form" :rules="rules" ref="loginForm" label-width="50px">
        <el-form-item prop="loginName">
          <i class="el-icon-user" slot="label"></i>
          <el-input v-model="form.loginName" placeholder="请输入用户名" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <i class="el-icon-lock" slot="label"></i>
          <el-input
            v-model="form.password"
            type="password"
            v-on:keyup.native.enter="login"
            placeholder="请输入密码"
            maxlength="16"
          ></el-input>
        </el-form-item>

         <el-form-item>
           <div style="color:red;">
            提示：登录用户名密码与大学统一身份认证平台用户名密码一致
          </div>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="login">登 录</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="修改昵称"
      :visible.sync="isLoclaShowUpdateUserName"
      width="450px"
      :close-on-click-modal="false"
      center
      class="login-panel"
    >
      <el-form label-width="50px">
        <el-form-item>
          <el-input v-model="userName" placeholder="请输入昵称" maxlength="50"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateUserName">修 改</el-button>
      </span>
    </el-dialog>

     <el-dialog
          title="修改密码"
          :visible.sync="isLoclaShowUpdatePassword"
          width="450px"
          :close-on-click-modal="false"
          center
          class="login-panel"
        >
          <el-form label-width="50px">
            <el-form-item>
              <el-input v-model="form.oldPassword" type="password" placeholder="请输入旧密码" maxlength="50"></el-input>
            </el-form-item>
             <el-form-item>
                <el-input v-model="form.newPassword" type="password" placeholder="请输入新密码" maxlength="50"></el-input>
              </el-form-item>
               <el-form-item>
              <el-input v-model="form.newPassword2" type="password" placeholder="请确认新密码" maxlength="50"></el-input>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="updatePassword">修 改</el-button>
          </span>
        </el-dialog>

  </div>
</template>
<script>
import RegisterDialog from '@/components/RegisterDialog.vue'

export default {
  name: 'App',
  components: {
    RegisterDialog
  },
  data() {
    return {registerVisible: false,
      elMainMinHeight: window.innerHeight - 144,
      form: {
        // username: '',
        password: '',
        newPassword: '',
        newPassword2: '',
        oldPassword: '',
        loginName: ''
      },
      rules: {
        // username: [
        //   { required: true, message: '用户名不能为空', trigger: 'blur' }
        // ],
        loginName: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      },
      isLoclaShowLogin: false,
      stat: {},
      isLoclaShowUpdateUserName: false, // 修改昵称
      isLoclaShowUpdatePassword: false, // 修改密码
      userName: '',
      logoUrl:require(`@/assets/imgs/logo.png`),
      logoCinziqaoUrl:require(`@/assets/imgs/logo-cinziqao.png`),
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo
    },
    isShowLogin() {
      return this.$store.state.isShowLoginDialog
    }
  },
  watch: {
    isShowLogin(val) {
      this.isLoclaShowLogin = val
    },
    isLoclaShowLogin(val) {
      this.$store.commit('showLoginDialog', val)
    }
  },
  created() {
    this.fetchLoginStat()
  },
  methods: {
    showRegister() {
      console.log('register')
      this.registerVisible = true
    },
    handleRegisterSuccess() {
      // 处理注册成功后的逻辑
      console.log('注册成功')
    },
    login() {
      this.$refs['loginForm'].validate((valid) => {
        if (valid) {
          this.submit()
        } else {
          return false
        }
      })
    },
    showLogin() {
      this.isLoclaShowLogin = true
    },
    submit() {
      utils.post('/login/login', this.form, res => {
        if (res.success) {
          this.$store.commit('showLoginDialog', false)
          var userInfo = {
            name: '',
            credits: 0,
            unitRanking: 0,
            collegeRanking: 0,
            cumulativeHours: 0,
            examsCount: 0,
            waitWorkCount: 0,
            todoCount: 0
          }
          // if (localStorage.getItem('cur_day_login') !== new Date().toLocaleDateString()) {
          //   this.$notify.success('登录获取学分+2')
          //   localStorage.setItem('cur_day_login', new Date().toLocaleDateString())
          // }
          if(res.data.points&&res.data.points>0){//登录之后会返回积分
              this.$notify.success('登录获取学分+'+res.data.points)
          }
          userInfo.name = res.data.user.userName
          this.$store.commit('setUserInfo', userInfo)
          localStorage.setItem('token', res.data.token)
          this.$router.push('/')
          // 重置提示登录
          window.$showMessage = false

          // 存一下用户信息
          localStorage.setItem('USER_INFO', JSON.stringify(res.data.user))

          // 直接在这里读取个人排名等信息
          this.getUserExtras()
        }
      })
    },
    getUserExtras() {
      utils.common.getUserExtras()
    },
    exit() {
      // 登录时间需要单独存一下
      const loginDate = localStorage.getItem('cur_day_login')
      localStorage.clear()
      localStorage.setItem('cur_day_login', loginDate)
      // 重置提示登录
      window.$showMessage = false
      this.$store.commit('exit')
      this.$router.replace('/')
      // 登录立即点退出，由于userCenter 未执行完会重新添加userInfo到 localStorage导致退出失败
      // window.location.href="/xxpt/xxpt-web"
    },
    goHome() {
      const activeMenu = this.$store.state.activeMenu
      if (utils.checkStartExam()) {
        if (activeMenu === '/LearningHome/OnlineExams') {
          this.$notify.error('正在考试中')
        }
        return
      }
      this.$router.replace('/')
    },
    fetchLoginStat() {
      utils.post('login/loginCount', {}, res => {
        if (res.success) {
          this.stat = res.data
        }
      })
    },
    updateUserName() {
      // 修改昵称
      if (!this.userName) {
        this.$message.error('请输入昵称')
        return
      }
      utils.post('login/updateUserName', { 'userName': this.userName }, res => {
        if (res.success) {
          this.$message.success('修改成功')
          this.isLoclaShowUpdateUserName = false
          this.userName = ''
        }
      })
    },
    updatePassword() {
          // 修改密码
          if (!this.form.oldPassword) {
            this.$message.error('请输入旧密码')
            return
          }
          if (!this.form.newPassword) {
            this.$message.error('请输入新密码')
            return
          }
          if (!this.form.newPassword2) {
            this.$message.error('请输入新密码')
            return
          }
        if(this.form.newPassword2 != this.form.newPassword){
            this.$message.error('两次输入新密码不一致')
            return
        }
          utils.post('login/updatePassword', { 'password': this.form.oldPassword,'newPassword':this.form.newPassword }, res => {
            if (res.success) {
              this.$message.success('修改成功')
              this.isLoclaShowUpdatePassword = false
            }
          })
        }
  }
}
</script>
<style lang="less">
@tabs_color: #cb2c21;

#app {
  position: relative;
  margin: 0px;
  padding: 0px;
  min-height: 100vh;
}

.xd-learn {
  .el-header {
    padding: 0px;
  }

  .el-main {
    padding: 0px;
    background: transparent;
  }

  .el-footer {
    margin-top: 57px;
    padding: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #991e15;
    p {
      margin: 0px;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 18px;
      letter-spacing: 0px;
      color: #fff;
      text-align: center;
      line-height: 36px;
    }

    .total {
      display: flex;
      span {
        flex: 1;
      }
    }
  }
}

.el-header {
  width: 100%;
  height: 176px;
  background: #fff;
  display: flex;
  align-items: center;
  z-index: 100;
  .logo {
    margin-left: 10px;
   // height: 109px;
    cursor: pointer;
  }

  .login_panel {
    margin-left: auto;
    margin-right: 30px;
    display: flex;
    align-items: center;

    .xueyuan:hover {
      //background: red;
      border:1px solid red;
    }
    a {
      text-decoration: none;
    }
  }

  .xueyuan {
    img {
      width: 25px;
    }
  }
  .admin {
    img {
      width: 24px;
    }
  }

  .el-header-bg {
    //background: url(assets/imgs/logo_bg.png) no-repeat;
    background-size: 100% 100%;
    height: 100%;
    align-items: center;
  }
}

.xueyuan,
.admin {
  cursor: pointer;
  height: 42px;
  border-radius: 21px;
  border: solid 1px #cb2c21;
  padding: 0px 20px;
  display: flex;
  align-items: center;

  span {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 1px;
    margin-left: 10px;
    color: #cb2c21;
  }
}

.admin {
  width: 112px;
  margin-top: -10px;
  margin-right: 30px;
}
a.admin {
  text-decoration: none;
}

.admin:hover {
  background: #bb0f04 ;
}

.login-info {
  .el-dropdown {
    color: #bb0f04;
  }
}

.login-panel {
  .el-form-item__label {
    font-size: 24px;
  }
}

.footer-root {
  width: 1200px;
  min-width: 1200px;
  margin: 0 auto;
  .bottom {
    padding-left: 180px;
    display: flex;
    flex: 1;
    justify-content: center;
  }
}
</style>
